<template>
  <!-- 设备型号 -->
  <Col
    span="24"
    class="col_2"
  >
  <div class="h3_title">
    <h3>设备型号</h3>
  </div>
  <div class="button_add">
    <Button
      size="small"
      @click="addNew"
      :disabled="userRole==='ROLE_DEMO'"
    >新增</Button>
  </div>
  <div class="table_list">
    <Table
      border
      :columns="userRole==='ROLE_DEMO'? modelTableDemo : modelTable"
      :data="data"
    ></Table>
  </div>
  <Modal
    v-model="dialog"
    :title="title"
  >
    <Form
      ref="formValidateRef"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="100"
    >
      <FormItem
        label="所属厂商："
        prop="manufacturerId"
      >
        <Select
          v-model="formValidate.manufacturerId"
          :disabled="isEdit"
        >
          <Option
            :value="item.id"
            v-for="(item, index) in firmdData"
            :key="index"
          >{{item.name}}</Option>
        </Select>
      </FormItem>
      <FormItem
        label="设备类型："
        prop="type"
      >
        <Select
          v-model="formValidate.type"
          :disabled="isEdit"
        >
          <Option :value="1">硬盘录像机</Option>
          <Option :value="2">热成像仪</Option>
        </Select>
      </FormItem>
      <FormItem
        label="设备型号："
        prop="model"
      >
        <Input
          v-model="formValidate.model"
          placeholder="请输入设备型号..."
        ></Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button
        type="primary"
        @click="handleSubmit"
      >确定</Button>
      <Button @click="dialog=false;">取消</Button>
    </div>
  </Modal>
  </Col>
</template>
<script>
import { modelTable } from "./material/tableColums";

import {
  getFirmList,
  getModel,
  postModel,
  putModel,
  delModel
} from "@/api";

import { validateAddress } from "@/utils/rules";
import { mapState } from "vuex";
export default {
  mounted() {
    this._getModel();
  },
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },
  data() {
    const that = this;
    return {
      isEdit: false,
      dialog: false,
      title: "新增设备型号",
      modelTable: modelTable(that,false),
      modelTableDemo: modelTable(that,true),
      formValidate: {
        type: "",
        name: "",
        model: "",
        manufacturerId: ""
      },
      selectRow: {},
      data: [],
      firmdData: [],
      ruleValidate: {
        type: [
          {
            required: true,
            message: "请选择设备类型"
          }
        ],
        manufacturerId: [
          {
            required: true,
            message: "请选择所属厂商"
          }
        ],
        model: [
          {
            required: true,
            validator: validateAddress(
              "设备型号",
              "设备型号只能输入中文、字母、数字、下划线和中划线"
            ),
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 获取厂商列表
    _getFirmList() {
      getFirmList().then(res => {
        if (res.code == 200) {
          this.firmdData = res.data;
        }
      });
    },

    // 获取设备列表
    _getModel() {
      getModel().then(res => {
        if (res.code == 200) {
          this.data = res.data;
        }
      });
    },

    // 保存
    handleSubmit() {
      let that = this;
      that.$refs.formValidateRef.validate(valid => {
        if (valid) {
          if (that.isEdit) {
            that._putModel();
          } else {
            that._postModel({ ...that.formValidate });
          }
        }
      });
    },

    // 打开编辑
    handleEdit(row) {
      let that = this;
      that._getFirmList();
      that.selectRow = { ...row };
      this.title = "编辑设备型号";
      that.dialog = true;
      that.isEdit = true;
      that.$refs.formValidateRef.resetFields();
      that.formValidate = { ...row };
    },

    // 编辑保存
    _putModel() {
      let that = this;
      let params = {
        ...that.formValidate,
        id: that.selectRow.id
      };
      putModel(params).then(res => {
        if (res.code == 200) {
          that.$Message.success("操作成功");
          that._getModel();
          that.dialog = false;
        } else {
          that.$Message.error(res.message);
        }
      });
    },

    // 新增保存
    _postModel(params) {
      let that = this;
      let obj = {
        1: "硬盘录像机",
        2: "热成像仪"
      };
      params.name = obj[params.type];
      postModel(params).then(res => {
        if (res.code == 200) {
          that.$Message.success("操作成功");
          that._getModel();
          that.dialog = false;
        } else {
          that.$Message.error(res.message);
        }
      });
    },

    handleDelete(row) {
      let that = this;
      delModel(row.id).then(res => {
        if (res.code == 200) {
          that.$Message.success("操作成功");
          that._getModel();
          that.dialog = false;
        } else {
          that.$Message.error(res.message);
        }
      });
    },

    // 打开新增
    addNew() {
      let that = this;
      let formValidate = {
        type: "",
        name: "",
        model: "",
        manufacturerId: ""
      };
      that.title = "新增设备型号";
      that.dialog = true;
      that.isEdit = false;
      that._getFirmList();
      that.$refs.formValidateRef.resetFields();
      that.formValidate = formValidate;
    }
  }
};
</script>
